<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>
        修改收款合同
    </title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="../../../css/main.css" media="all">
    <link rel="stylesheet" href="../../../lib/layui/css/layui_2.5.7.css">
    <script type="text/javascript" src="../../../lib/loading/okLoading.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">

</head>

<style>
    /* .layui-form-label {
        width: 112px !important;
    } */
    .layui-tab {
        /* text-align: left !important;
        margin: 10px 0px; */
        overflow: auto !important;
    }
    .layui-upload-file {
        height: 0 !important;
    }

</style>

<body>
<div class="x-body" id="app">
    <form class="layui-form layui-form-pane" id="add" lay-filter="updateInfo">
        <div class="layui-tab-content">
            <span style="font-weight:bold">基本信息</span>
            <div class="layui-form-item" style="margin-top: 8px;">
                <label class="layui-form-label">客户名称<span style="color: red;">*</span></label>
                <div class="layui-input-block">
                    <input  autocomplete="off"  type="text" name="name" lay-filter="name" lay-verify="required" placeholder="客户名称" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">证件类型</label>
                <div class="layui-input-block">
                    <select name="codeType" id="codeType" lay-filter="codeType" >
                        <option value=""></option>
                        <option value="1">营业执照</option>
                        <option value="2">身份证号</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item" >
                <label class="layui-form-label">证件代码</label>
                <div class="layui-input-block">
                    <input  autocomplete="off"  type="text" name="code" lay-filter="code" lay-verify="" placeholder="证件代码" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">省市区</label>
                <div class="layui-input-inline">
                    <select name="sheng" lay-filter='sheng' lay-verify="" id="sheng">
                        <option value="">请选择省</option>
                        <option v-for='item in sheng' :value="item.id">{{item.name}}</option>
                    </select>

                </div>
                <div class="layui-input-inline">
                    <select name="shi" lay-filter="shi" lay-verify="" id="shi">
                        <option value="">请选择市</option>
                        <option v-for='item in shi' :value="item.id">{{item.name}}</option>
                    </select>
                </div>
                <div class="layui-input-inline">
                    <select name="qu" lay-filter="qu" lay-verify="" id="qu">
                        <option value="">请选择县/区</option>
                        <option v-for='item in qu' :value="item.id">{{item.name}}</option>
                    </select>
                </div>
            </div>

            <div class="layui-form-item" >
                <label class="layui-form-label">详细地址</label>
                <div class="layui-input-block">
                    <input  autocomplete="off"  type="text" name="address" lay-filter="address" lay-verify="" placeholder="详细地址" class="layui-input">
                </div>
            </div>

            <span style="font-weight:bold">执照照片</span>
            <div class="layui-upload"  style="margin-top: 8px;">
                <!--                <button type="button" class="layui-btn" id="test1">上传图片</button><input  autocomplete="off"  class="layui-upload-file" type="file" accept="" name="file">-->
                <!--                <div class="layui-upload-list">-->
                <!--                    <img class="layui-upload-img" id="demo1" width="250" height="250">-->
                <!--                    <p id="demoText"></p>-->
                <!--                </div>-->
                <button type="button" class="layui-btn" id="upImage">重新上传</button>
                <div class="layui-upload-list" >
                    <img class="layui-upload-img" id="demo1" style="width: auto;height:150px;">
                    <p id="demoText"></p>
                </div>
            </div>

            <span style="font-weight:bold">备注信息</span>
            <div class="layui-form-item layui-form-text" style="margin-top: 8px;">
                <div class="layui-input-block">
                    <textarea name="memo" placeholder="备注信息" class="layui-textarea"></textarea>
                </div>
            </div>

        </div>
        <div style="text-align: center" class="layui-form-item">
            <button class="layui-btn" type="button" lay-filter="sub" lay-submit="sub">
                保存
            </button>
        </div>
    </form>

</div>

<script type="text/javascript" src="../../../js/jquery.min.js"></script>
<script type="text/javascript" src="../../../js/myAjax.js"></script>
<script type="text/javascript" src="../../../js/pub.js"></script>
<script src="../../../lib/layui/layui2.5.7.js" charset="utf-8"></script>
<script src="../../../js/x-layui.js" charset="utf-8"></script>
<script src="../../../js/vue.min.js" charset="utf-8"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>

<!--<script>-->
<!--    layui.use(['element', 'layer', 'form', 'laydate'], function () {-->
<!--        $ = layui.jquery;//jquery-->
<!--        lement = layui.element();//面包导航-->
<!--        layer = layui.layer;//弹出层-->
<!--        laydate = layui.laydate;//日期插件-->
<!--        form = layui.form;-->
<!--        okLoading.close($);-->
<!--    })-->

<!--</script>-->
<script>

    var customerId = getQueryVariable("recordId");

    layui.use(['laydate', 'table','form', 'layer','upload'],
        function () {
            var laydate = layui.laydate;
            var $ = layui.jquery;
            var form = layui.form;
            var layer = layui.layer;
            // var element = layui.element;
            var table = layui.table;
            var upload = layui.upload;
            okLoading.close($);

        });


    const vm = new Vue({
        el: "#app",
        data: {

            sheng: [],
            shi: [],
            qu: [],
            shengVal: '',
            shiVal: '',
            quVal: ''
        },
        created() {
            this.getSheng(1);
            var that = this;
            let request = {
                url: 'xa/customer/findCustomerInfo',
                data: {
                    userId: $userId,
                    id:customerId
                },
                method: "get"
            }
            sendRequest(request, (res) => {
                that.getShi(res.data.addressProvince);
                that.getQu(res.data.addressCity);
            })

        },
        computed: {

        },
        methods: {
            getSheng: function(id) {
                var that = this;
                let request = {
                    url: 'other/region/getRegionByParentId',
                    data: {
                        userId: $userId,
                        parentId:id
                    },
                    method: "get"
                }
                sendRequest(request, (res) => {
                    that.sheng = res;
                })
            },
            getShi: function(id) {
                if (id != null) {
                    var that = this;
                    let request = {
                        url: 'other/region/getRegionByParentId',
                        data: {
                            userId: $userId,
                            parentId:id
                        },
                        method: "get"
                    }
                    sendRequest(request, (res) => {
                        that.shi = res;
                    })
                }
            },
            getQu: function(id) {
                if (id != null) {
                    var that = this;
                    let request = {
                        url: 'other/region/getRegionByParentId',
                        data: {
                            userId: $userId,
                            parentId: id
                        },
                        method: "get"
                    }
                    sendRequest(request, (res) => {
                        that.qu = res;
                    })
                }
            },
        },
        mounted() {
            var that = this;
            let request = {
                url: 'xa/customer/findCustomerInfo',
                data: {
                    userId: $userId,
                    id:customerId
                },
                method: "get"
            }
            sendRequest(request, (res) => {
                var info = res.data;
                console.log(info)
                layui.use(['table', 'form', 'upload','layer'], function() {
                    var table = layui.table;
                    var form = layui.form;
                    var upload = layui.upload;

                    var picUrl = null ;
                    var oldUrl = null;

                    var codeTypeSelect = document.getElementById("codeType");
                    for(var i=0;i<codeTypeSelect.length;i++){
                        if(codeTypeSelect[i].value==info.codeType)
                            codeTypeSelect[i].selected = true;
                    }
                    oldUrl = res.data.picUrl;
                    console.log(oldUrl)
                    if(oldUrl == null){
                        document.getElementById("demo1").style.visibility="hidden";
                    }else {
                        document.getElementById("demo1").style.visibility="visible";
                        $('#demo1').attr('src', baseHead+"/other/viewUploadFile?id="+oldUrl)//图片链接（base64） */
                    }

                        //表单赋值
                        form.val("updateInfo", { //updateInfo 即 class="layui-form" 所在元素属性 lay-filter="" 对应的值
                            "name": info.name, // "name": "value"
                            "code": info.code,
                            "sheng": info.addressProvince,
                            "shi": info.addressCity,
                            "qu": info.addressArea,
                            "address": info.address,
                            "memo": info.memo
                        });
                    form.render();

                    //自定义验证规则
                    // form.verify({
                    //     nikename: function(value) {
                    //         if (value.length < 5) {
                    //             return '昵称至少得5个字符啊';
                    //         }
                    //     },
                    //     pass: [/(.+){6,12}$/, '密码必须6到12位'],
                    //     repass: function(value) {
                    //         if ($('#L_pass').val() != $('#L_repass').val()) {
                    //             return '两次密码不一致';
                    //         }
                    //     }
                    // });

                    //监听省选择
                    form.on('select(sheng)', function(data) {
                        that.shengVal = data.elem[data.elem.selectedIndex].text;
                        that.getShi(data.value);
                        setTimeout(() => {
                            form.render('select');
                        }, 200);
                    });
                    //监听市选择
                    form.on('select(shi)', function(data) {
                        that.shiVal = data.elem[data.elem.selectedIndex].text;
                        that.getQu(data.value);
                        setTimeout(() => {
                            form.render('select');
                        }, 200);
                        setTimeout(() => {
                            form.render('select');
                        }, 200);
                    });
                    //监听区选择
                    form.on('select(qu)', function(data) {
                        that.quVal = data.elem[data.elem.selectedIndex].text;
                        setTimeout(() => {
                            form.render('select');
                        }, 200);
                    });

                    //普通图片上传
                    //执行实例
                    var index = null;
                    var uploadInst = upload.render({
                        elem: '#upImage'
                        ,url: baseHead+'other/fileUpload1' //改成您自己的上传接口
                        ,before: function(obj){
                            //预读本地文件示例，不支持ie8
                            obj.preview(function(index, file, result){
                                document.getElementById("demo1").style.visibility="visible";
                                $('#demo1').attr('src', result); //图片链接（base64）
                            });
                            index = layer.load();
                        }
                        ,done: function(res){
                            //如果上传成功
                            layer.close(index);
                            if(res.code == 0){
                                picUrl = res.data;
                            }
                            else {
                                layer.alert("上传失败，请重新上传！");
                            }
                        }
                        ,error: function(){
                            //演示失败状态，并实现重传
                            var demoText = $('#demoText');
                            demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                            demoText.find('.demo-reload').on('click', function(){
                                uploadInst.upload();
                            });
                        }
                    });
                    form.on('submit(sub)',
                        function (data) {
                            if(picUrl == null){
                                picUrl = oldUrl;
                            }
                            var val = data.field;
                            if (val.codeType == 2) {
                                //身份证号码的合法性验证
                                // 身份证号码为15位或者18位，15位时全为数字，18位前17位为数字，最后一位是校验位，可能为数字或字符X
                                var reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
                                if(reg.test(val.code) === false){
                                    layer.alert("身份证输入不合法！", {
                                        icon: 7
                                    })
                                    return false;
                                }
                            }
                            val.userId = $userId;
                            val.id = customerId;
                            // val.codeType = 1;
                            val.addressProvince = val.sheng;
                            val.addressCity = val.shi;
                            val.addressArea = val.qu;
                            val.picUrl=picUrl;
                            let request = {
                                url: 'xa/customer/addAndUpdate',
                                data: val,
                                method: "post",
                            };
                            sendRequest(request, (data) => {
                                if (data.code === 0) {
                                    layer.alert("操作成功", {
                                            icon: 6
                                        },
                                        function () {
                                            var index = parent.layer.getFrameIndex(window.name);
                                            parent.layer.close(index);
                                            parent.location.reload();

                                        });
                                } else {
                                    layer.alert(data.msg, {
                                        icon: 5
                                    })
                                }
                            });
                            return false;
                        });
                });
            })
        },


    });



</script>

</body>

</html>
